﻿<div class='instruction-wrapper'>
  <div data-ui='typeToSearchMessage' class='instruction'>
    <div class='instruction-header'>
      <%= startTypingMessage %>
    </div>
    <div class='instruction-content'>
      <%= resultsWillAppearAsYouSearchMessage %>
    </div>
  </div>

  <div data-ui='searchingMessage' class='instruction is-showingSpinner'>
    <div class='instruction-header'>
      <%= searchingMessage %>
    </div>
    <div data-region='spinner'></div>
  </div>

  <div data-ui='noResultsMessage' class='instruction'>
    <div class='instruction-header'>
      <%= noResultsFoundMessage %>
    </div>
    <div class='instruction-content'>
      <%= trySearchingForSomethingElseMessage %>
    </div>
  </div>

  <div data-region='searchResults' class='flexColumn'></div>
</div>

<div class='contentBar contentBar--bottom u-bordered--top flexColumn-bugFix'>
  <div data-ui='playAllButton' class='button button--flat'>
    <%= playAllMessage %>
  </div>

  <div data-ui='addAllButton' class='button button--flat'>
    <%= addAllMessage %>
  </div>

  <div data-ui='saveAllButton' class='button button--flat'>
    <%= saveAllMessage %>
  </div>
</div>